<template>
    <div class="hello">
        <h3>在子组件中应用父中的Data</h3>
        {{count}}
        <hr>
        <h3>在子组件中使用VUEX</h3>
        <h2>NUM: {{$store.state.num}}</h2>
        <h2>DNUM: {{$store.state.dnum}}</h2>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            count: Number
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
